
<script>
    import Bus from "bus";
    export default {
        data(){
            return {
                user_name:"",
                friend_name:""
            }
        },

        methods:{

            to_register(){

                Bus.my_name=this.user_name
                this.$router.push({
                    name:"video",
                    query:{my_name:this.user_name,friend_name:this.friend_name}
                })

            }
        }
    }
</script>

<template>

    <div class="register">

        <div class="register-form">
            <h2>Video Call 1 to 1 with WebRTC</h2>
            <div class="register-user_name">
                <input type="text" v-model="user_name" placeholder="请输入你的名字...">
            </div>
            <div class="register-user_name">
                <input type="text" v-model="friend_name" placeholder="请输入被叫人名字...">
            </div>
            <a href="javascript:;" class="register-button" :disabled="user_name==''||friend_name==''" @click="to_register" >注册</a>
        </div>

    </div>
  
</template>

<style lang="stylus">

    .register-form{
        position fixed
        top 50%
        left 50%
        transform translate(-50%,-50%)
        width 70%
        margin 0 auto
    }

     .register-form h2{
         font-size  24px
         text-align center
         margin-bottom 60px
     }

    .register-user_name input {
        height 50px
        border 1px solid #ccc
        width 100%
        padding 0 10px
        border-radius 5px

        margin-bottom 20px
    }

    .register-button{
        background-color #337AB7
        color #ffffff
        border-radius 5px
        line-height 45px
        text-align center 
        font-size 20px

        &[disabled]{
            opacity 0.5
        }
    }

</style>
